<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('店铺订单-下货支付')"/>
</head>
<body>
<div class="main-content">
    <form id="form-shop-order-pay" class="form-horizontal">
        <input id="code_url" type="hidden" th:value="${codeUrl}"/>
        <h4 class="form-header h4">店铺订单-下货支付</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">付款单号：</label>
                    <div class="col-sm-4">
                        <input id="pay_sn" class="form-control" type="text" th:value="${paySn}"
                               disabled>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">订单金额：</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="payCost" type="text" th:value="${payCost}"
                               disabled>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">支付方式：</label>
                    <div class="col-sm-4">
                        <label class="radio-box"> <input type="radio" name="payWay" value="1"/> 余额支付 </label>
                        <label class="radio-box"> <input type="radio" name="payWay" value="2"/> 扫码支付 </label>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 payBalance">
                <div class="form-group">
                    <label class="col-sm-3 control-label">店铺余额：</label>
                    <div class="col-sm-4">
                        <input class="form-control" type="text" id="balance" th:value="${balance}"
                               disabled>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 payBalance">
                <div class="form-group">
                    <label class="col-sm-3 control-label"></label>
                    <div class="col-sm-7">
                        <button type="button" onclick="payBalance()" class="btn btn-w-m btn-success">确认支付</button>
                        <span class="help-block m-b-none" id="balanceTips" style="color:red"><i
                                class="fa fa-info-circle"></i>订单余额不足，请先充值</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-12" id="qrcodeBox">
                <div class="form-group">
                    <label class="col-sm-3 control-label">付款二维码：</label>
                    <div class="col-sm-7">
                        <div id="qrcode"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">付款状态：</label>
                    <div class="col-sm-7">
                        <div id="paySuccess" style="color:green">付款成功</div>
                        <div id="prePay" style="color:red">待付款</div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/qrcode/qrcode.min.js}"></script>
<script th:inline="javascript">
    $('#paySuccess').hide();
    $("#balanceTips").hide();
    const payCost = $("#payCost").val();
    const balance = $("#balance").val();

    $('input').on('ifChecked', function (event) {
        if ($(event.target).attr("name") == "payWay") {
            switch (parseInt($(this).val())) {
                case 1:
                    $('.payBalance').show();
                    $('#qrcodeBox').hide();
                    break;
                case 2:
                    $('.payBalance').hide();
                    $('#qrcodeBox').show();
                    break;
                default:
                    break;
            }
        }
    });
    if (parseFloat(payCost) <= parseFloat(balance)) {
        $('input:radio[name="payWay"]').each(function () {
            if (parseInt($(this).val()) == 1) {
                $(this).click();
                $('.payBalance').show();
                $('#qrcodeBox').hide();
            }
        });
    } else {
        //余额不足够支付
        $('input:radio[name="payWay"]').each(function () {
            if (parseInt($(this).val()) == 2) {
                $(this).click();
                $('.payBalance').hide();
                $('#qrcodeBox').show();
            }
        });
        $("#balanceTips").show();
    }

    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 250,
        height: 250
    });
    qrcode.makeCode($('#code_url').val());

    setInterval(function () {
        refreshShopPayStatus()
    }, 1000);

    function payBalance() {
        $.modal.confirm("确认使用余额支付吗？", function () {
            $.get(ctx + "back/shopOrder/balancePay/" + $('#pay_sn').val() + "/" + $('#payCost').val(), function (result) {
                if (parseInt(result.code) != 0) {
                    $.modal.alertError(result.msg);
                }
            });
        })
    }

    function refreshShopPayStatus() {
        $.get(ctx + "back/shopOrder/getShopPayStatus/" + $('#pay_sn').val(), function (result) {
            if (parseInt(result.code) === 0) {
                if (parseInt(result.data) > 0) {
                    $('#prePay').hide();
                    $('.payBalance').hide();
                    $('#qrcodeBox').hide();
                    $('#paySuccess').show();
                }
            }
        });
    }

</script>
</body>
</html>